<template>
	<view>
		<view class="logo">
			<image class="logo-img" mode="widthFix" src="/static/img/common/logo.svg"></image>
			<text class="logo-text">就业职通车</text>
		</view>

		<view class="loginBox">
			<form>
				<view class="user-input">
					<image mode="widthFix" class="login-img" src="/static/img/mine/user.svg"></image>
					<input v-model="username" class="login_input" type="text" placeholder="请输入账号" />
				</view>
				<view class="user-input">
					<image mode="widthFix" class="login-img" src="/static/img/mine/password.svg"></image>
					<input v-model="password" class="login_input" type="password" placeholder="请输入密码" />
				</view>
				<view class="login-btn">
					<button @tap="login" class="login-submit login-active" style="width: 45%;">登录</button>
					<button @tap="res" class="login-submit" style="width: 45%;">注册</button>
				</view>
			</form>
		</view>
	</view>
</template>

<script setup>
	import {
		post
	} from '/hooks/req.js'
	import {
		ref,
		inject
	} from 'vue'
	import {
		encrypt
	} from "/hooks/encrypt.js"

	const $root = inject('$root')
	let username = ref("")
	let password = ref("")
	//登录
	const login = () => {
		post($root + `/user/login/`, {
				username: username.value,
				password: password.value
			})
			.then(result => {
				if (result.data.code == 200) {
					uni.showToast({
						title: '登录成功'
					});
					//存储用户名和token
					const userData = {
						token: encrypt(result.data.data),
						username: encrypt(username.value)
					}
					uni.setStorageSync('userData', JSON.stringify(userData))
					uni.navigateBack()
				} else {
					uni.showModal({
						title: '登录失败',
						content: '请确认用户名或密码',
					})
				}
			})
	}
	//注册
	const res = () => {
		post($root + `/user/register/`, {
				username: username.value,
				password: password.value
			})
			.then(result => {
				if (result.data.code == 200) {
					uni.showToast({
						title: '用户注册成功'
					});
					//存储用户名和token
					const userData = {
						token: encrypt(result.data.data),
						username: encrypt(username.value)
					}
					uni.setStorageSync('userData', JSON.stringify(userData))
					uni.navigateBack()
				} else {
					uni.showToast({
						title: '用户注册失败'
					});
				}
			})
	}
</script>

<style scoped>
	page {
		background: white;
	}

	.logo {
		width: 300rpx;
		margin: 30px auto 35px auto;
		text-align: center;
	}

	.logo-img {
		width: 100%;
	}

	.logo-text {
		letter-spacing: 4px;
		font-size: 18px;
		color: rgb(66, 165, 245);
	}

	.login_input {
		background: #efefef;
		border-radius: 50px;
		height: 36px;
		padding: 0 34px;
		box-sizing: border-box;
		width: 100%;
	}

	.login-img {
		width: 18px;
		position: absolute;
		left: 10px;
		top: 9px;
	}

	.user-input,
	.login-btn {
		width: 560rpx;
		position: relative;
		margin: auto;
		margin-top: 20px;
	}

	.login-btn {
		display: flex;
		justify-content: space-between;
	}

	.login-submit {
		border: none;
		border-radius: 36px;
		border: 1px solid #1296db;
		color: #1296db;
		height: 36px;
		line-height: 32px;
		font-size: 16px;
	}

	.login-active {
		background: #1296db;
		color: white;
	}
</style>